<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<header th:replace="admin/fragments/header::headerFragment"></header>
<link rel="stylesheet" href="/static/css/articleManage.css">
<link rel="stylesheet" href="/static/css/layui.css">
<head>

</head>
<style>
    .contents {
        width: 100%;
        padding: 70px 0 0 200px;
        background: #f5f5f5;
    }
    
    .footer {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .footer p {
        height: 50px;
        background: #f9f9f9;
        line-height: 50px;
        text-align: left;
        padding-left: 50px;
    }
</style>

<body>
    <div th:replace="admin/fragments/header::header-body"></div>
    <div class="contents">
        <div class="contentwapper">
            <h5>文章管理</h5>
            <!---layui表格-->
            <table lay-filter="test" class="layui-hide" id="demo"></table>
            <script type="text/html" id="barDemo">
                <a style="color: white !important;" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a style="color: white !important;" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
            <!--bootstrap-->
<!--            <table class="table table-hover">-->
<!--                <thead>-->
<!--                    <tr>-->
<!--                        <th scope="col">文章标题</th>-->
<!--                        <th scope="col">发布时间</th>-->
<!--                        <th scope="col">浏览量</th>-->
<!--                        <th scope="col">分类</th>-->
<!--                        <th scope="col">发布状态</th>-->
<!--                        <th scope="col">操作</th>-->
<!--                    </tr>-->
<!--                </thead>-->
<!--                <tbody>-->
<!--                    <tr th:each="blog:${blogs}">-->
<!--                        <td style="color: #3e7eb7;" th:text="${blog.title}">Mark</td>-->
<!--                        <td th:text="${#temporals.format(blog.createTime, 'yyyy-MM-dd HH:mm:ss')}">Otto</td>-->
<!--                        <td>1</td>-->
<!--                        <td><span th:text="${blog.type}" class="badge badge-success">Success</span></td>-->
<!--                        <td>-->
<!--                            <span th:text="${blog.state==1?'已发布':'草稿'}" th:class="${blog.state==1?'badge-success':'badge-secondary'}">Success</span>-->
<!--                        </td>-->
<!--                        <td>-->
<!--                            <a th:href="@{'/articleManage/edit/'+${blog.id}}"  class="btn btn-primary">编辑</a>-->
<!--                            <a th:href="@{'/articleManage/delete/'+${blog.id}}"  class="btn btn-danger">删除</a>-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                </tbody>-->
<!--            </table>-->
        </div>
        <div th:replace="admin/fragments/footer::footer"></div>
    </div>


</body>
<!--<script src="/static/js/layui.all.js"></script>-->
<!--弹出层上面的可能不生效，引入最新的all.js-->
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.js"></script>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
        //加载表格
        loadNew(1);
        //封装成一个方法
        function loadNew(currIndex){
            var curNum;
            //表格渲染
            table.render({
                elem: '#demo'
                ,height: 500
                ,url:'/articleManage/getPage'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,page: true //开启分页
                ,limit:"10"//每页的数量lay-filter
                ,done: function (res, curr, count) {
                    curNum = curr;    //得到当前页码
                }
                ,cols: [
                    [
                        {field:'id',  title: 'ID', sort: true}
                        ,{field:'title',  title: '文章标题'}
                        ,{field:'type',  title: '类型'}
                        ,{field:'content', title: '内容'}
                        ,{field:'createTime',templet: "<div>{{layui.util.toDateString(d.timestamp, 'yyyy-MM-dd HH:mm:ss')}}</div>", title: '时间', sort: true} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{title:"操作", fixed: 'right', align:'center', toolbar: '#barDemo'}
                    ]
                ]
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                console.log(obj.data)
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                console.log(layEvent)
                if(layEvent === 'edit'){
                    // layer.msg('查看操作');
                    var id=data.id;
                    window.location.href="/articleManage/edit/"+id;
                } else if(layEvent === 'del')
                {
                    layer.confirm('真的删除行么', function(index){
                        //向服务端发送删除指令
                        var id=data.id;
                        $.ajax({
                            url: "/articleManage/delete",
                            data: {"id": id},
                            success: function (data) {
                                if(data.code ===200){
                                    //删除这一行
                                    obj.del();
                                    //关闭弹框
                                    layer.close(index);
                                    loadNew(curNum);
                                }else{
                                    alert(data.message)
                                    layer.close(index);
                                    loadNew(curNum);
                                }
                            }
                        });
                    });
                }else if(layEvent === 'detail'){
                    layer.msg('编辑操作');
                }
            });
        }



    });

</script>
</html>